<template>
    <div>
      <Row id="topMenu" type='flex' align='middle'>
        <Col span="4" offset='2'>
          <h1>权限管理系统</h1>
        </Col>
        <Col span="4" offset='10'>
          <h2>欢迎:{{name}}</h2>
        </Col>
        <Col>
          <h2 @click="loginOut">退出</h2>
        </Col>
      </Row>
      <Row id="sideMenu">
        <Col span="3">
          <Menu :theme="theme">
            <template v-for="item in menus">
              <sideMenuItem v-if="item.children && item.children.length!==0" :parent-item="item" :key="'menu-'+item.name">
              </sideMenuItem>
              <menu-item v-else :name="item.name" :key="'menu-'+item.name" @click.native='jump(item)'>
                  <span>{{ item.meta.name || item.name }}</span>
              </menu-item>
            </template>
          </Menu>
        </Col>
        <Col span="14" offset='1' class="contentBody">
        <Breadcrumb>
          <BreadcrumbItem :to="item.path || '/'" v-for="(item,index) in breadcrumbs" :key='index'>
              <Icon :type="item.meta.icon"></Icon> {{item.name}}
          </BreadcrumbItem>
        </Breadcrumb>
        <router-view></router-view>
        </Col>
      </Row>
    </div>
</template>

<script>
import sideMenuItem from '@/components/common/sideMenuItem.vue'
export default {
  data () {
    return {
      user: {},
      menus: [],
      theme: 'light'
    }
  },
  computed: {
    breadcrumbs () {
      return (this.$route && this.$route.matched) || []
    },
    name () {
      return this.user.name
    }
  },
  components: {
    sideMenuItem
  },
  methods: {
    jump ({path}) {
      let vm = this
      vm.$router.push({
        path
      })
    },
    loginOut () {
      this.$emit('loginOut')
    }
  },
  created () {
    console.log(`执行了index${JSON.stringify(this.$parent.menuData)}`)
    let user = this.$parent.userData
    if (user) {
      this.user = user
    } else {
      this.$router.push({
        path: '/login'
      })
    }
    let menus = this.$parent.menuData
    if (menus) {
      this.menus = menus
    }
  }
}
</script>

<style lang="scss" scoped>
  #topMenu {
    height: 60px;
    background:#5cadff
  }
  #sideMenu {
    .contentBody {
      margin-top: 20px
    }
    .ivu-breadcrumb {
      font-size: 16px !important
    }
  }
</style>
